<template>
  <div class="main_box">
    <!-- Title -->
    <top_title :formConfig="formConfig">
      <div slot="button">
        <div style="width: 100%;display: flex;justify-content: space-between;">
          <div>
            <el-button size="small" type="primary" @click="getlist(true)">搜索</el-button>
            <el-button size="small"  @click="refresh">刷新</el-button>
          </div>
          <div>
            <el-button type="primary" size="small" @click="add">新增</el-button>
            <el-button type="primary" size="small" @click="expout">导出</el-button>
          </div>
        </div>
      </div>
    </top_title>
    <!-- Table -->
    <el-card>
      <!-- <div style="padding: 10px 0">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div> -->
      <table-list :columns="tableColumns" :tableData="group_list" :pageObj="pageObj" :loading="loading" :type="true"
        @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange" :btnlong="'200'"
        @switch="release">
        <template #header="slotProps">
          <el-button size="small" type="text" @click="edit(slotProps.date)" v-btn-key="['client:clue:update']"
            v-if="slotProps.date.role_key != 'admin'">编辑</el-button>
          <el-button size="small" type="text" @click="del(slotProps.date)" v-btn-key="['client:clue:update']"
            v-if="slotProps.date.role_key != 'admin'">删除</el-button>
        </template>
      </table-list>
    </el-card>
    <!-- 新增编辑 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :close-on-press-escape="false"
      :close-on-click-modal="false">
      <!-- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="'120px'" class="demo-ruleForm"
        :label-position="'center'">
        <el-form-item label="账号" prop="role_name">
          <el-input v-model="ruleForm.username" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="role_key">
          <el-input v-model="ruleForm.nick_name" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="role_key">
          <el-input v-model="ruleForm.email" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="role_key">
          <el-input v-model="ruleForm.phonenumber" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio :label="item.value" v-for="item in opotionslist" :key="item.value">{{ item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像" prop="">
          <upload-img></upload-img>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-input v-model="ruleForm.roles" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="">
          <el-input v-model="ruleForm.remark" type="textarea" :rows="2" placeholder="请输入内容" style="width: 100%;"
            clearable></el-input>
        </el-form-item>
        <div style="display: flex;justify-content: flex-end;">
          <el-button type="primary" @click="submitForm('ruleForm')">{{ title + '提交' }}</el-button>
        </div>
      </el-form> -->
      新增编辑
    </el-dialog>
  </div>
</template>

<script>
import {
  getuserlist,
  getuserchange,
  getuserdel,
  getuserinfo,
  getroleadd,
  getroleedit,
  // getroleexport
} from "@/api/main/user";
import list from './userlist.json'
export default {
  name: "",
  components: {},
  data() {
    return {
      // 列表加载状态
      loading: true,
      // 
      title: "新增",
      dialogVisible: false,
      // 列表类型
      tableColumns: list.tableColumns,
      // 列表数据
      group_list: [],
      //分页参数
      pageObj: {
        size: 10,
        currentPage: 1, //前往当前页
        total: 100
      },
      // 搜索栏
      formConfig: list.formConfig,
      rules: list.rules,
      ruleForm: {
        id: "",
        username: "",
        nick_name: "",
        email: "",
        phonenumber: 0,
        sex: "1",
        avatar: "",
        remark: "",
        roles: [],
      },
      // 权限标识符
      menuOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 选择参数
      opotionslist: [
        {
          value: 0,
          label: "男"
        },
        {
          value: 1,
          label: "女"
        }
      ],
    };
  },
  created() {
    this.getlist(true);
  },
  mounted() { },
  methods: {
    refresh() {
      this.formConfig.form.username = ""
      this.formConfig.form.create_by = ""
      this.formConfig.form.status = ""
      this.getlist(true);
    },
    // 首次获取
    getlist(val) {
      if (val) {
        this.pageObj.currentPage = 1
      }
      this.loading = true
      let params = {
        username: this.formConfig.form.username,
        create_by: this.formConfig.form.create_by,
        status: this.formConfig.form.status,
        page: this.pageObj.currentPage,
        page_size: this.pageObj.size
      }
      getuserlist(params)
        .then((res) => {
          if (res.status == 1) {
            this.group_list = res.data;
            this.pageObj.total = res.total
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((err) => {
          this.loading = false
        });
    },
    // 新增
    add() {
      this.title = "新增"
      this.dialogVisible = true
      this.ruleForm = {
        id: "",
        username: "",
        nick_name: "",
        email: "",
        phonenumber: 0,
        sex: "1",
        avatar: "",
        remark: "",
        roles: [],
      }
    },
    // 
    edit(val) {
      this.title = "编辑"
      this.dialogVisible = true
      getuserinfo({ id: val.user_id })
        .then((res) => {
          if (res.status == 1) {
            console.log(res.data, "获取用户信息")
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    del(val) {
      getuserdel({ id: val.user_id })
        .then((res) => {
          if (res.status == 1) {
            this.$message.success(res.msg);
            this.getlist(true);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    // 信息提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parms = {
            id: this.ruleForm.id,
            username: this.ruleForm.username,
            nick_name: this.ruleForm.nick_name,
            email: this.ruleForm.email,
            phonenumber: this.ruleForm.phonenumber,
            sex: this.ruleForm.sex,
            avatar: this.ruleForm.avatar,
            remark: this.ruleForm.remark,
            roles: this.ruleForm.roles,
          }
          if (this.ruleForm.id == "") {
            this.addrole(parms)
          } else {
            this.editrole(parms)
          }
        } else {
          return false;
        }
      });
    },
    // 新增提交
    addrole(parms) {
      getroleadd(parms)
        .then((res) => {
          if (res.status == 1) {
            this.getlist(true)
            this.dialogVisible = false
            this.$message.success(res.msg);
          } else {
            this.dialogVisible = false
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.dialogVisible = false
          this.$message.error(res.msg);
        });
    },
    // 修改提交
    editrole(parms) {
      getroleedit(parms)
        .then((res) => {
          if (res.status == 1) {
            this.getlist(true)
            this.dialogVisible = false
            this.$message.success(res.msg);
          } else {
            this.dialogVisible = false
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.dialogVisible = false
          this.$message.error(res.msg);
        });
    },
    // 状态修改
    release(val) {
      getuserchange({
        user_id: val.user_id,
        status: val.status
      })
        .then(res => {
          if (res.status == 1) {
            this.getlist(false);
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 导出
    expout(){
      getroleexport({
        username:  this.formConfig.form.username,
        create_by: this.formConfig.form.create_by,
        status:  this.formConfig.form.status
      })
        .then(res => {
          if (res.status == 1) {
            console.log(res,123)
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg || "数据响应过慢，请稍后再试");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 多选
    handleSelectionChange(val) {
      console.log(val, 123)
    },
    // 页码选择
    handleCurrentChange(val) {
      this.pageObj.currentPage = val
      this.getlist(false);
    },


    // 选择带父级=============
    handleCheck(data, { checkedKeys }) {
      if (checkedKeys.includes(data.id)) {
        // 选中
        let node = this.$refs.tree.getNode(data.id); // getNode(node-key)
        this.selectChildren(data, true); // 选中子节点
        this.parentNodesChange(node); // 选中父节点
      } else {
        this.selectChildren(data, false); // 取消子节点
      }
      console.log(this.$refs.tree.getCheckedKeys(), 12313)
      this.ruleForm.permissions = this.$refs.tree.getCheckedKeys();
      // this.selected = this.$refs.tree.getCheckedKeys();
    },
    selectChildren(data, checked) {
      data &&
        data.children &&
        data.children.map(item => {
          this.$refs.tree.setChecked(item.id, checked);
          if (data.children) {
            this.selectChildren(item, checked);
          }
        });
    },
    // 父级递归
    parentNodesChange(node) {
      // console.log(node);
      if (node.parent) {
        for (let key in node) {
          if (key == "id") {
            // console.log(node[key]);
            this.$refs.tree.setChecked(node, true);
          }
        }
        if (node.parent && node.id !== 0) {
          this.parentNodesChange(node.parent);
        }
      }
    }
  },
};
</script>

<style lang="less" scoped></style>
